<template>
    <div class="punit-select-contianer">
        <a-select
            v-model:value="punitState"
            :filter-option="filterOption"
            @change="handleChange"
            :options="options"
            show-search
            placeholder="请选择所属项目"
            style="width: 100%"
            :dropdownMatchSelectWidth="194"
            :listHeight="230"
            popupClassName="cust-select-dropdown"
        ></a-select>
    </div>
</template>

<script setup lang="ts">
import type { SelectProps } from 'ant-design-vue';
import ls from '@/utils/local-storage';

const emit = defineEmits(['change']);

const punitState = ref<number | undefined>(undefined);

const options = ref<SelectProps['options']>([
    { label: '全部项目', value: 0 },
    { label: '智慧物业项目', value: 1790 },
    { label: '社区测试项目', value: 2200 },
    { label: '测试项目1', value: 2201 },
    { label: '测试项目2', value: 2202 },
    { label: '测试项目3', value: 2203 },
    { label: '测试项目4', value: 2204 },
    { label: '测试项目5', value: 2205 },
    { label: '测试项目6', value: 2206 },
    { label: '测试项目7', value: 2207 },
    { label: '测试项目8', value: 2208 },
    { label: '测试项目9', value: 2209 },
    { label: '测试项目10', value: 22010 },
    { label: '测试项目11', value: 22011 },
]);

const filterOption = (input: string, option: any) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const handleChange = (value: number, option: SelectProps['options']) => {
    // ls.set(BUILD_KEY, value);
    emit('change', value, option);
};

</script>

<style lang="less" scoped>
.punit-select-contianer {
    padding: 2px 0;
    background-color: rgba(18,150,163,.3);
    :deep(.ant-select-single .ant-select-selector) {
        color: #fefeff;
        background: rgba(18,150,163,.3);
        border: 0px;
    }
    :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector){
        background: rgba(18,150,163,.3);
        border: 0px;
    }
    :deep(.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector){
        border: 0px;
    }
}
</style>

<style lang="less">
.cust-select-dropdown {
    top: 80px !important;
    background: rgba(52, 104, 136, 0.8);
    color: #fff;
    border-radius: 2px;
    padding: 0px;
    box-sizing: border-box;
    .ant-select-item {
        font-family: PingFang SC;
        color: #fff;
    }
    .ant-select-item-option:hover {
        font-weight: 500;
        background-color: rgba(192, 192, 192, 0.5);
        border-radius: 0px;
    }
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
        color: #fff;
        font-weight: 500;
        background-color: rgba(192, 192, 192, 0.5);
        border-radius: 0px;
    }
}
</style>